<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>帝一流</title>
    <link th:href="@{/static/plugin/bootstrap-table/bootstrap-table.css}" type="text/css" rel="stylesheet">
</head>
<body>
<div layout:fragment="cm-flex" class="cm-flex">
    <div class="cm-breadcrumb-container">
        <ol class="breadcrumb">
            <li><a href="#">库存管理</a></li>
            <li class="active">入库管理</li>
        </ol>
    </div>
    <form id="cm-search" action="index.html" method="get">
        <input type="search" name="q" autocomplete="off" placeholder="Search...">
    </form>
</div>
<div layout:fragment="content" class="container-fluid">
    <div class="panel panel-default">
        <div class="panel-body auto-height">
            <div class="search-block" id="search-block">
                <form action="#" class="form-group form-horizontal">
                    <div class="row">
                        <div class="col-sm-3 col-md-4">
                            <input type="text" class="form-control" placeholder="序列号/姓名" id="search"
                                   data-toggle="completer" data-suggest="true">
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <div class="input-group">
                                <input type="text" class="form-control" id="createTime" placeholder="入库时间">
                                <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" id="btnTime">
                                             <img th:src="@{/static/img/sf/calendar-clock.svg}" height="18" width="18">
                                        </button>
                                </span>
                            </div>
                        </div>
                        <div class="col-sm-3 col-md-2">
                            <select id="searchStatus" data-placeholder="付款状态 ..." name="status"
                                    class="form-control chosen-select">
                                <option value=""></option>
                                <option value="0">未付款</option>
                                <option value="1">已付款</option>
                            </select>
                        </div>
                        <div class="col-sm-2 col-md-1 col-md-offset-2">
                            <button type="button" class="btn btn-primary btn-block" id="doSearch">查询</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="table-panel">
                <div class="sum">
                    <span class="sf-user-male-alt">&nbsp;</span><b id="debt" title="欠款">: -0 元</b>
                    <span class="sf-dashboard">&nbsp;</span><b id="sumWeight" title="总重量">: 0 kg</b>
                    <span class="sf-bitcoin">&nbsp;</span><b id="sumMoney" title="总金额">: 0 元</b>
                </div>
                <div class="btn-group" role="group" id="toolbar">
                    <button type="button" class="btn btn-default" id="addStock"><i class="fa fa-fw fa-plus"></i></button>
                    <button type="button" class="btn btn-default" id="editStock"><i class="fa fa-fw fa-pencil"></i></button>
                    <button type="button" class="btn btn-default" id="delStock"><i class="fa fa-fw fa-trash-o"></i></button>
                </div>
                <table id="stockTable"></table>
            </div>
        </div>
    </div>
</div>
<div layout:fragment="myJs">
    <div id="stockModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h5 class="modal-title" id="stockModalTitle">
                        添加库存
                    </h5>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="stockForm">
                        <input type="hidden" id="id" name="id">
                        <div class="form-group">
                            <label for="bookNo" class="col-sm-2 control-label">账本号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="bookNo" name="bookNo" placeholder="账本号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="serialNo" class="col-sm-2 control-label">序列号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="serialNo" name="serialNo" placeholder="序列号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" name="member.name" placeholder="姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="tel" class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="tel" name="member.tel" placeholder="电话">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="gross" class="col-sm-2 control-label">毛重</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="gross" name="gross" placeholder="毛重">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="tare" class="col-sm-2 control-label">去皮</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="tare" name="tare" placeholder="去皮">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="price" class="col-sm-2 control-label">单价</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="price" name="price" placeholder="单价">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="status" class="col-sm-2 control-label">付款</label>
                            <div class="col-sm-10">
                                <input type="hidden" id="status" name="status" value="1">
                                <div class="form-control" style="border: 0px;box-shadow: none">
                                    <a href="javascript:void(0);" id="isPay">
                                        <img th:src="@{/static/img/sf/switch-on.svg}" height="24" width="24">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveStock">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <script th:src="@{/static/js/jquery-migrate-1.2.1.js}"></script>
    <script th:src="@{/static/plugin/bootstrap-table/bootstrap-table.js}"></script>
    <script th:inline="javascript">
        $(function () {
            var autoHeight = $("div.auto-height").height();
            var rowHeight = $('#search-block').height();
            var tableHeight = autoHeight - rowHeight;

            var $table = $('#stockTable');
            $table.bootstrapTable({
                // 条纹
                striped: true,
                height: tableHeight,
                toolbar: '#toolbar',
                pagination: true,
                paginationLoop: false,
                sidePagination: 'server',
                url: /*[[@{/grain/stockList}]]*/,
                method: 'post',
                contentType: "application/x-www-form-urlencoded",
                dataField: "data",
                queryParamsType: '',
                queryParams: function queryParams(params) {
                    var param = {
                        pageNo: params.pageNumber,
                        pageSize: params.pageSize,
                        status: $('#searchStatus').val(),
                        createTime: $('#createTime').val(),
                        search: $('#search').val()
                    };
                    return param;
                },
                formatLoadingMessage: function () {
                    return "正在加载数据中，请稍候……"
                },
                formatShowingRows: function (a, b, c) {
                    return "第 " + a + " / " + b + " 条，共 " + c + " 条 ";
                },
                formatRecordsPerPage: function (a) {
                    return "每页 " + a;
                },
                formatNoMatches: function () {
                    return '没有找到匹配的数据';
                },
                onLoadSuccess:function(data){

                    $('#sumWeight').html(': ' + data['sumWeight'] + ' kg');
                    $('#sumMoney').html(': ' + data['sumMoney'] + ' 元');
                    $('#debt').html(': -' + data['debt'] + ' 元');
                },
                columns: [
                    {
                        field: '',
                        checkbox: true
                    },
                    {
                        field: 'bookNo',
                        title: '账本号'
                    },
                    {
                        field: 'serialNo',
                        title: '序列号'
                    },
                    {
                        field: 'member',
                        title: '姓名',
                        formatter: function (value, row, index) {
                            if (value) {
                                return value['name'];
                            }

                            return '';
                        }
                    },
                    {
                        field: 'gross',
                        title: '毛重',
                        align: 'right'
                    },
                    {
                        field: 'tare',
                        title: '去皮',
                        align: 'right'
                    },
                    {
                        field: 'suttle',
                        title: '净重 (kg)',
                        align: 'center'
                    },
                    {
                        field: 'price',
                        title: '单价 (元/kg)',
                        align: 'center'
                    },
                    {
                        field: 'money',
                        title: '金额 (元)',
                        align: 'right',
                        formatter: function (value, row, index) {
                            value = value + '';
                            if (value.indexOf('.') > 0){
                                return value.split('.')[0];
                            }

                            return value;
                        }
                    },
                    {
                        field: 'createTime',
                        title: '创建时间',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var str = '';
                            if (value) {
                                str = value.substr(0, 10);
                            }

                            return '<span style="cursor: default" title="' + value + '">' + str + '</span>';
                        }
                    },
                    {
                        field: 'status',
                        title: '状态',
                        align: 'center',
                        formatter: function (value, row, index) {
                            if (1 == value) {
                                return '<span class="sf-sign-check" style="display: inline-block;width: 16px;height: 16px;background-size: 16px 16px;"></span>';
                            }

                            return '<a href="javascript:void(0);" onclick="payMoney(this);" data-id="' + row.id + '" title="付款"><span class="sf-light-bulb" style="display: inline-block;width: 16px;height: 16px;background-size: 16px 16px;"></span></a>';
                        }
                    }
                ]
            });


            $('#searchStatus').chosen({allow_single_deselect: true});

            laydate.render({
                elem: '#createTime'
                ,type: 'date'
                ,range: true
                ,eventElem: '#btnTime'
                ,trigger: 'click'
            });

            $('#doSearch').on('click', function () {
                $table.bootstrapTable("refresh");
            });

            $('#addStock').on('click', function () {
                $('#stockForm')[0].reset();

                $('#stockModalTitle').html('添加库存');
                $('#id').val('');
                document.getElementById('bookNo').readOnly = false;
                document.getElementById('serialNo').readOnly = false;
                $('#status').val(1);
                $('#isPay').find('img').attr('src', /*[[@{/static/img/sf/switch-on.svg}]]*/);
                $('#stockModal').modal('show');
            });

            var i = 1;
            $('#isPay').toggle(function () {
                $(this).find('img').attr('src', /*[[@{/static/img/sf/switch-on.svg}]]*/);
                $('#status').val(i++ % 2);
            }, function () {
                $(this).find('img').attr('src', /*[[@{/static/img/sf/switch-off.svg}]]*/);
                $('#status').val(i++ % 2);
            });

            $('#saveStock').on('click', function () {
                var param = $('#stockForm').serialize();
                $.ajax({
                    type: $('#id').val() == '' ? 'post' : 'put',
                    url: /*[[@{/grain/stock}]]*/,
                    data: param,
                    dataType: "json",
                    success: function (result) {
                        if (result == 1) {
                            $('#stockModal').modal('hide');
                            $('#stockTable').bootstrapTable('refresh');

                            alertTip('success', '保存成功');
                        } else {
                            alertTip('error', '保存失败');
                        }
                    }
                });
            });

            $('#editStock').on('click', function () {
                var stocks = $table.bootstrapTable('getSelections');
                if (stocks.length != 1) {
                    swal("请选择一条信息进行修改!");

                    return;
                }
                $('#stockForm')[0].reset();
                document.getElementById('bookNo').readOnly = true;
                document.getElementById('serialNo').readOnly = true;

                var stock = stocks[0];
                $('#id').val(stock['id']);
                $('#bookNo').val(stock['bookNo']);
                $('#serialNo').val(stock['serialNo']);
                if (stock['member']){
                    $('#name').val(stock['member']['name']);
                    $('#tel').val(stock['member']['tel']);
                }

                $('#tare').val(stock['tare']);
                $('#gross').val(stock['gross']);
                $('#price').val(stock['price']);

                // 是否付款
                if (stock['status'] == 1) {
                    $('#status').val(1);
                    $('#isPay').find('img').attr('src', /*[[@{/static/img/sf/switch-on.svg}]]*/);
                }else {
                    $('#status').val(0);
                    $('#isPay').find('img').attr('src', /*[[@{/static/img/sf/switch-off.svg}]]*/);
                }

                $('#stockModalTitle').html('修改库存');
                $('#stockModal').modal('show');
            });

            $('#delStock').on('click', function () {
                var stocks = $table.bootstrapTable('getSelections');
                if (stocks.length < 1) {
                    swal("请至少选择一条信息进行删除!");

                    return;
                }
                // 提示
                swal({
                        title: "确定删除选中库存?",
                        text: "删除后将无法恢复",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#e67e22",
                        confirmButtonText: "删除",
                        closeOnConfirm: true
                    },
                    function () {
                        var idArr = [];
                        for (var i = 0; i < stocks.length; i++) {
                            idArr[i] = stocks[i]['id'];
                        }
                        $.ajax({
                            type: 'delete',
                            url: /*[[@{/grain/stock}]]*/,
                            contentType: "application/json;charset=utf-8",
                            data: JSON.stringify(idArr),
                            dataType: "json",
                            success: function (result) {
                                if (result == 1) {
                                    $('#stockModal').modal('hide');
                                    $('#stockTable').bootstrapTable('refresh');

                                    alertTip('success', '删除成功');
                                } else {
                                    alertTip('error', '删除失败');
                                }
                            }
                        });
                    });
            });
        });

        function payMoney(a) {
            var id = $(a).data('id');
            // 提示
            swal({
                    title: "确认付款状态?",
                    text: "付款后将无法恢复",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#e67e22",
                    confirmButtonText: "付款",
                    closeOnConfirm: true
                },
                function () {
                    var path = /*[[@{/grain/stockPay/}]]*/;
                    $.ajax({
                        type: 'put',
                        url: path + id,
                        dataType: "json",
                        success: function (result) {
                            if (result == 1) {
                                $('#stockTable').bootstrapTable('refresh');
                                alertTip('success', '付款成功');
                            } else {
                                alertTip('error', '付款失败');
                            }
                        }
                    });
                });
        };
    </script>
</div>
</body>
</html>